---
import PageSection from "../pageSection.astro";
import { featuredTweets } from "./featuredTweets";
import TweetSlider from "./tweetSlider.astro";
---

<PageSection
  size={"24"}
  className="mx-auto grid max-w-7xl grid-cols-1 gap-4 px-4 pb-12 sm:px-6 md:grid-cols-2 md:gap-10 lg:px-8"
  id="love"
>
  <div
    class="order-first mb-10 flex flex-col items-start text-left md:order-last"
  >
    <h2
      class="text-xl font-semibold text-t3-purple-200 md:text-2xl lg:text-2xl"
    >
      Well loved in production (and on Twitter)
    </h2>
    <h3
      class="mt-2 text-3xl font-bold tracking-tight text-t3-purple-50 md:text-5xl lg:text-5xl"
    >
      Our users ship. <span class="italic">Fast.</span>
    </h3>
    <p
      class="mt-4 max-w-3xl text-base text-t3-purple-200 md:text-lg lg:text-lg"
    >
      Mention <a
        href="https://twitter.com/search?q=create-t3-app"
        rel="noopener noreferrer"
        class="text-t3-purple-100">create-t3-app</a
      > if you want to pop up here ;)
    </p>
  </div>
  <TweetSlider tweets={featuredTweets} />
</PageSection>
